<template>
  <div class="contribute-container">
    <div class="chart-wrapper">
      <div style="display: flex">
        <span class="ib spantitle">投稿积分统计</span>
      </div>
      <el-divider content-position="left"
        >按六大栏目进行发稿积分统计</el-divider
      >
      <el-form
        :model="queryParams_six"
        size="small"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="单位名称">
          <el-select
            v-model="queryParams_six.companyName"
            placeholder="请筛选单位名称"
            filterable
            @change="queryFalg = true"
          >
            <el-option
              v-for="(item, k) in depData"
              :key="k"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始时间">
          <el-date-picker
            v-model="queryParams_six.startTime"
            type="date"
            placeholder="选择月"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            @change="queryFalg = true"
            :picker-options="{
              disabledDate(time) {
                return time.getTime() >= Date.now();
              },
            }"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="queryParams_six.endTime"
            type="date"
            placeholder="选择月"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            @change="queryFalg = true"
            :picker-options="{
              disabledDate(time) {
                return time.getTime() >= Date.now();
              },
            }"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item style="marginleft: 20px">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleTongji_six"
            >统计</el-button
          >
          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
      <el-divider content-position="left"
        >按媒体报道进行发稿积分统计</el-divider
      >
      <el-form
        :model="queryParams_mt"
        size="small"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="单位名称">
          <el-select
            v-model="queryParams_mt.companyName"
            placeholder="请筛选单位名称"
            filterable
            @change="queryFalg = true"
          >
            <el-option
              v-for="(item, k) in depData"
              :key="k"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始时间">
          <el-date-picker
            v-model="queryParams_mt.startTime"
            type="date"
            placeholder="选择月"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            @change="queryFalg = true"
            :picker-options="{
              disabledDate(time) {
                return time.getTime() >= Date.now();
              },
            }"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="queryParams_mt.endTime"
            type="date"
            placeholder="选择月"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            @change="queryFalg = true"
            :picker-options="{
              disabledDate(time) {
                return time.getTime() >= Date.now();
              },
            }"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item style="marginleft: 20px">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleTongji_mt"
            >统计</el-button
          >
          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :lg="24" class="mb20"> </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="mb20">
          <Chart ref="options12" :options="options12" :height="'250px'"></Chart>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="mb20"> </el-col>

        <el-col :xs="24" :sm="24" :lg="24" class="mb20">
          <Chart ref="options13" :options="options13" :height="'250px'"></Chart>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Chart from "./chart.vue";

import {
  customizeDepNameDetail,
  customizedeptList,
  fourChannelCount,
  fourViewChannelCountSix,
  fourViewChannelCountMt,
} from "@/api/extendApplication/contribute";

export default {
  name: "DepDetail",

  data() {
    return {
      queryFalg: false,
      queryParams: {
        startTime: "",
        endTime: "",
      },
      queryParams_six: {
        startTime: "",
        endTime: "",
      },
      queryParams_mt: {
        startTime: "",
        endTime: "",
      },
      depData: [],
      options12: {},
      options13: {},
      companyDatail: {
        mtbdEntity: { alist: [] },
      },

      loading: false,
    };
  },

  components: { Chart },

  computed: {},
  watch: {},

  mounted() {
    let date = new Date();
    this.queryParams_six.startTime = `${date.getFullYear()}-${
      date.getMonth() + 1
    }-01`;
    this.queryParams_six.endTime = `${date.getFullYear()}-${
      date.getMonth() + 1
    }-${date.getDate()}`;

    this.getCompanyDetail();
  },

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    // 2.0
    getCompanyDetail() {
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      fourChannelCount(this.queryParams).then((res) => {
        console.log("res: ", res);
        this.companyDatail = res.data;
        this.$nextTick(() => {
          this.loading.close();
        });
      });
    },
    // 2.1
    handleTongji_six() {
      this.$emit("update:componentsName", "CompanyDetailSix");
    },
    // 2.2
    handleTongji_mt() {
      this.$emit("update:componentsName", "CompanyDetailMt");
    },

    goBack() {
      this.$emit("update:componentsName", "");
    },
    chart12() {
      let legendData = ["积分"];
      let xData = [
        "图片新闻",
        "公司要问",
        "基层动态",
        "本部要闻",
        "长供故事汇",
        "长供家园",
        // "媒体报道",
      ];
      let yData = [
        this.companyDatail.tpxwScore,
        this.companyDatail.gsywScore,
        this.companyDatail.jcdtScore,
        this.companyDatail.bbywScore,
        this.companyDatail.gshScore,
        this.companyDatail.jyScore,
        // this.companyDatail.mtbdEntity.score,
      ];

      this.options12 = {
        title: {
          show: true,
          text: " 六大板块积分柱状图",
          left: "center",
          // top: 10,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          data: legendData,
          right: "0",
          // top: 10,
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          data: xData,
        },
        yAxis: {
          type: "value",
          show: true,
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ddd",
            },
          },
        },
        series: [
          {
            type: "bar",
            name: "积分",
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              color: "#1e80ff",
            },
            data: yData,
          },
        ],
      };
    },
    chart13() {
      let legendData = ["积分"];
      let xData = ["媒体报道"];
      let yData = [this.companyDatail.mtbdEntity.score];
      this.options13 = {
        title: {
          show: true,
          text: " 媒体报道积分柱状图",
          left: "center",
          // top: 10,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          data: legendData,
          right: "0",
          // top: 10,
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          data: xData,
        },
        yAxis: {
          type: "value",
          show: true,
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ddd",
            },
          },
        },
        series: [
          {
            type: "bar",
            name: "积分",
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              color: "#1e80ff",
            },
            data: yData,
          },
        ],
      };
    },
  },
};
</script>

<style scoped lang="scss">
th,
td {
  text-align: center;
}

.chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
  margin-bottom: 10px;
  .spantitle {
    height: 30px;
    line-height: 30px;
    font-weight: 700;
    font-size: 16px;
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
